<template>
  <div class="prediction-input">
    <div class="input-group">
      <input 
        type="text" 
        v-model="stockCode"
        placeholder="请输入股票代码（如：000001）"
        class="stock-input"
        @keyup.enter="startPrediction"
      />
      <button 
        @click="startPrediction"
        :disabled="!stockCode || isLoading"
        class="predict-button"
      >
        {{ isLoading ? '预测中...' : '开始预测' }}
      </button>
    </div>
    <div v-if="error" class="error-message">
      {{ error }}
    </div>
  </div>
</template>

<script>
import { ref } from 'vue'
import { useAITradeStore } from '@/store'

export default {
  name: 'PredictionInput',
  emits: ['prediction-complete'],
  setup(props, { emit }) {
    const store = useAITradeStore()
    const stockCode = ref('')
    const isLoading = ref(false)
    const error = ref('')

    const startPrediction = async () => {
      if (!stockCode.value) {
        error.value = '请输入股票代码'
        return
      }

      error.value = ''
      isLoading.value = true

      try {
        console.log('开始预测，股票代码:', stockCode.value)
        const result = await store.getPrediction(stockCode.value)
        console.log('预测结果:', result)
        if (result && result.data) {
          emit('prediction-complete', { stockCode: stockCode.value, result: result.data })
        } else {
          throw new Error('预测结果格式不正确')
        }
      } catch (err) {
        error.value = `预测失败：${err.message || '未知错误'}`
        console.error('Prediction error:', err)
      } finally {
        isLoading.value = false
      }
    }

    return {
      stockCode,
      isLoading,
      error,
      startPrediction
    }
  }
}
</script>

<style scoped>
.prediction-input {
  width: 100%;
  max-width: 600px;
  margin: 20px auto;
  padding: 20px;
}

.input-group {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
}

.stock-input {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 16px;
}

.predict-button {
  padding: 8px 20px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  transition: background-color 0.3s;
}

.predict-button:hover:not(:disabled) {
  background-color: #45a049;
}

.predict-button:disabled {
  background-color: #cccccc;
  cursor: not-allowed;
}

.error-message {
  color: #ff4444;
  margin-top: 8px;
  font-size: 14px;
}
</style>